<template>
    <div class="user-info-form unit-info-form-wrap">
        <el-form label-width="150px" :model="unitInfoForm" :rules="unitInfoFormRules" ref="unitInfoForm" @submit.native.prevent>
            <!-- 当前编辑的联网单位id -->
            <input type="hidden" v-model="unitInfoForm.id">
            <!-- 当前编辑的联网单位编码 -->
            <input type="hidden" v-model="unitInfoForm.orgId">
            <el-form-item label="单位名称：" prop="orgName">
                <el-input v-model="unitInfoForm.orgName" auto-complete="off" :disabled="isEdit" placeholder="请输入单位名称"></el-input>
            </el-form-item>
            <el-form-item  v-if="!isEdit" label="英文名称：" prop="englishName">
                <el-input v-model="unitInfoForm.englishName" auto-complete="off" placeholder="请输入英文名称"></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="签约开始：" prop='signingStartTime'>
                        <el-date-picker
                            v-model="unitInfoForm.signingStartTime"
                            type="datetime"
                            placeholder="选择签约开始日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="签约结束：" prop='signingEndTime'>
                        <el-date-picker
                            v-model="unitInfoForm.signingEndTime"
                            type="datetime"
                            placeholder="选择签约结束日期时间"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="延期时间（天）：" prop="delayTime">
                        <el-input type="number" v-model="unitInfoForm.delayTime" auto-complete="off" placeholder="请输入延期时间"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="视频截图个数：" prop="picLimit">
                        <el-input type="number" min="0" v-model="unitInfoForm.picLimit" auto-complete="off" placeholder="请输入视频截图个数"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="自动任务限制个数：" prop="jobTaskNum">
                        <el-input type="number" v-model="unitInfoForm.jobTaskNum" auto-complete="off" placeholder="请输入自动任务限制个数"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="排序：" prop="sort">
                        <el-input type="number" v-model="unitInfoForm.sort" auto-complete="off" placeholder="请输入排序"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="tree-wrap">
                    <el-form-item label="组织平台：" prop="upOrgIds">
                        <tree-select
                            v-model="unitInfoForm.upOrgIds"
                            filterable
                            :data="upOrgList"
                            :defaultProps="upOrgDefaultProps"
                            :checkedKeys="defaultCheckedUpOrgIds"
                            :nodeKey="upOrgIdNodeKey">
                        </tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <!-- <el-form-item label="室内地图结构：" prop="indoorMapInfoId">
                        <el-select
                            v-model="unitInfoForm.indoorMapInfoId" 
                            placeholder="请选择室内地图结构"
                            filterable>
                            <el-option
                                v-for="item in indoorMapOptions"
                                :key="item.id"
                                :label="item.appName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item> -->
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="tree-wrap">
                    <el-form-item v-if="isEdit" label="默认建筑物结构：" prop="defaultBuildingId">
                        <tree-select
                            v-model="unitInfoForm.defaultBuildingId"
                            filterable
                            :data="buildList"
                            :defaultProps="buildDefaultProps"
                            :checkedKeys="defaultCheckedBuild"
                            :nodeKey="buildNodeKey">
                        </tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item v-if="isEdit" label="默认消防设施：" prop="defaultFcStructId" id="unitDefaultFcStructId">
                        <el-select multiple v-model="unitInfoForm.defaultFcStructId" 
                            placeholder="请选择默认消防设施"
                            filterable
                            :filter-method="getFcfOptions"
                            :loading="relateFcIdsSelectloading">
                            <el-option
                                v-for="item in relateFcOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                            <el-pagination
                                @current-change="handleCurrentChange"
                                :current-page.sync="relateFcPageIndex"
                                small
                                layout="total, prev, pager, next"
                                :total="relateFcTotal">
                            </el-pagination>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span=12>
                    <el-form-item label="视频用ilink云：" prop="isLianyunAccount">
                        <el-switch
                            v-model="unitInfoForm.isLianyunAccount"
                            active-text="是"
                            inactive-text="否"
                            :active-value=1
                            :inactive-value=0>
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span=12>
                    <el-form-item label="视频是否联网：" prop="isVideoInternet">
                        <el-switch
                            v-model="unitInfoForm.isVideoInternet"
                            active-text="是"
                            inactive-text="否"
                            :active-value=1
                            :inactive-value=0>
                        </el-switch>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 对应维保公司信息 -->
            <el-row>
                <el-col :span="12">
                    <el-form-item label="维保公司：" prop="maintainCompanyId">
                        <tree-select
                            v-model="unitInfoForm.maintainCompanyId"
                            filterable
                            :width="200"
                            :data="maintainCompanyOptions"
                            :defaultProps="maintainCompanyDefaultProps"
                            :checkedKeys="defaultCheckedMaintainCompany"
                            :nodeKey="maintainCompanyNodeKey"
                            @node-click="handleNodeClick"
                            placeholder="选择维保公司">
                        </tree-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="合同编号：" prop="maintainContract">
                        <el-input v-model="unitInfoForm.maintainContract" auto-complete="off" placeholder="请输入合同编号"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="合同开始日期：" prop='maintainStartDate'>
                        <el-date-picker
                            v-model="unitInfoForm.maintainStartDate"
                            type="date"
                            placeholder="选择合同开始日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="合同结束日期：" prop='maintainEndDate'>
                        <el-date-picker
                            v-model="unitInfoForm.maintainEndDate"
                            type="date"
                            placeholder="选择合同结束日期"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label-width="0" class="verifyidentity-button">
                <el-button round @click.stop="closeFun">取消</el-button>
                <el-button type="primary" round @click="saveUnitInfo" :disabled="showdisabled">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import TreeSelect from '@/libs/TreeSelect/Main'
import { getFbsTree } from '@/api/fbs'
import { getUcOrgTree } from '@/api/user'
import { getFcfSelectList } from '@/api/fcf'
import { getBasicInfo, getIndoorMapInfoList, getUpOrgIds, getMaintainOrgList, saveOrgInfoExt } from '@/api/org'

export default {
    name: 'UnitInfoForm',
    props: {
        oldInfo: {
            type: Object
        },
        closeFun: {
            required: true
        }
    },
    components: { 
        TreeSelect
    },
    data() {
        return {
            showdisabled: false,
            isEdit: false,
            // 组织平台下拉框配置
            upOrgList: [],
            upOrgDefaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            defaultCheckedUpOrgIds: [],
            upOrgIdNodeKey: 'id',
            // 建筑结构
            buildList: [],
            buildDefaultProps: {
                children: 'nodes',
                label: 'text',
                value: 'id'
            },
            defaultCheckedBuild: [],
            buildNodeKey: 'id',
            // 维保公司
            maintainCompanyOptions: [],
            maintainCompanyDefaultProps: {
                children: 'nodes',
                label: 'name',
                value: 'id'
            },
            defaultCheckedMaintainCompany: [],
            maintainCompanyNodeKey: 'id',
            // 默认消防设施
            relateFcIdsSelectloading: false,
            relateFcOptions: [],
            relateFcPageIndex: 1,
            relateFcTotal: 0,
            // 室内地图
            // indoorMapOptions: [],
            unitInfoForm: {
                id : '',
                orgName : '',
                englishName : '',
                signingStartTime : '',
                signingEndTime : '',
                delayTime : '',
                picLimit : '',
                jobTaskNum : '',
                indoorMapInfoId : '',
                sort : '',
                defaultBuildingId : '',
                defaultFcStructId : '',
                orgId : '',
                isLianyunAccount : '',
                isVideoInternet : '',
                upOrgIds : '',
                maintainCompanyId: '',
                maintainContract: '',
                maintainStartDate: '',
                maintainEndDate: '',
            },
            unitInfoFormRules: {
                orgName: [
                    { required: true, message: '请输入联网单位', trigger: 'blur' }
                ],
                signingStartTime: [
                    { required: true, message: '请选择签约开始日期时间', trigger: 'change' }
                ],
                signingEndTime: [
                    { required: true, message: '请选择签约结束日期时间', trigger: 'change' }
                ],
                delayTime: [
                    { required: true, message: '请输入延期时间', trigger: 'blur' }
                ],
                picLimit: [
                    { required: true, message: '请输入视频截图个数', trigger: 'blur' }
                ],
                jobTaskNum: [
                    { required: true, message: '自动任务限制个数', trigger: 'blur' }
                ],
                isLianyunAccount: [
                    { required: true, message: '请选择视频是否用ilink云', trigger: 'change' }
                ],
                isVideoInternet: [
                    { required: true, message: '请选择视频是否联网', trigger: 'change' }
                ],
                upOrgIds: [
                    { required: true, message: '请选择组织平台', trigger: 'blur' }
                ],
                maintainContract: [
                    { required: false, message: '请输入合同编号', trigger: 'blur' }
                ],
                maintainStartDate: [
                    { required: false, message: '请选择合同开始日期', trigger: 'blur' }
                ],
                maintainEndDate: [
                    { required: false, message: '请选择合同结束日期', trigger: 'blur' }
                ],
            }
        }
    },
    created() {
        let that = this
        that.getUcOrgTreeList()
        // that.getIndoorMapIdsList()
        that.getMaintainCompanyList()
        // 如果是编辑
        if(that.oldInfo.id) {
            that.isEdit = true
            that.getBuildTreeList()
            that.getFcfOptions()
            that.$nextTick(() => {
                setTimeout(() => {
                    // 获取历史信息
                    getBasicInfo({
                        organizationId: that.oldInfo.organizationId
                    }).then(res => {
                        that.$nextTick(() => {
                            that.unitInfoForm.id = res.data.id
                            that.unitInfoForm.orgName = res.data.shortName
                            that.unitInfoForm.signingStartTime = res.data.signingStartTime
                            that.unitInfoForm.signingEndTime = res.data.signingEndTime
                            that.unitInfoForm.delayTime = res.data.delayTime
                            that.unitInfoForm.picLimit = res.data.picLimit
                            that.unitInfoForm.jobTaskNum = res.data.jobTaskNum
                            that.unitInfoForm.indoorMapInfoId = res.data.indoorMapInfoId
                            that.unitInfoForm.sort = res.data.sort
                            that.unitInfoForm.defaultBuildingId = res.data.defaultBuildingId
                            that.defaultCheckedBuild = res.data.defaultBuildingId ? String(res.data.defaultBuildingId).split(',') : [] // 默认建筑物结构下拉框数据回显
                            that.unitInfoForm.defaultFcStructId = res.data.defaultFcStructId ? res.data.defaultFcStructId.split(',') : ''
                            that.unitInfoForm.orgId = res.data.organizationId
                            that.unitInfoForm.isLianyunAccount = res.data.isLianyunAccount
                            that.unitInfoForm.isVideoInternet = res.data.isVideoInternet
                            that.unitInfoForm.maintainCompanyId = String(res.data.maintainCompanyId || '')
                            that.defaultCheckedMaintainCompany = res.data.maintainCompanyId ? String(res.data.maintainCompanyId).split(',') : [] // 维保公司下拉框数据回显
                            that.unitInfoForm.maintainContract = res.data.maintainContract
                            that.unitInfoForm.maintainStartDate = res.data.maintainStartDate
                            that.unitInfoForm.maintainEndDate = res.data.maintainEndDate
                            // 有维保公司
                            if(res.data.maintainCompanyId) {
                                // 切换为必填字段
                                that.unitInfoFormRules.maintainContract[0].required = true
                                that.unitInfoFormRules.maintainStartDate[0].required = true
                                that.unitInfoFormRules.maintainEndDate[0].required = true
                            }
                            that.getUpOrgIdsList()
                        })
                    })
                    
                }, 200)
            })
        }
    },
    methods: {
        // 获取组织平台
        getUcOrgTreeList() {
            let that = this
            getUcOrgTree().then(res => {
                that.upOrgList = res.data
            })
        },
        // 回显组织平台树
        getUpOrgIdsList() {
            let that = this
            getUpOrgIds({
                orgId: that.oldInfo.organizationId
            }).then(res => {
                that.$nextTick(() => {
                    // 过滤掉维保公司id
                    let arr = res.data.split(',').filter((obj) => {
                        return obj != that.unitInfoForm.maintainCompanyId
                    })
                    that.defaultCheckedUpOrgIds = arr
                    that.unitInfoForm.upOrgIds = arr.join(',')
                })
            })
        },
        // 获取室内地图结构
        getIndoorMapIdsList() {
            let that = this
            getIndoorMapInfoList({
                queryType: 0
            }).then(res => {
                that.indoorMapOptions  = res.data
            })
        },
        // 获取建筑物结构
        getBuildTreeList() {
            let that = this
            getFbsTree({
                organizationId: that.oldInfo.organizationId
            }).then(res => {
                that.buildList = res.data
            })
        },
        // 默认消防设施
        getFcfOptions(name, pageChange) {
            let that = this
            // 重新搜索时页码复原   
			if(!pageChange) {
				this.relateFcPageIndex = 1
			}
            let parames = {
                fbsId: 0,
                organizationId: that.oldInfo.organizationId,
                parentId: 0,
                pageIndex: this.relateFcPageIndex - 1,
                pageSize: 10,
                name: name || ''
            } 
            that.relateFcIdsSelectloading = true
            getFcfSelectList(parames).then(res => {
                if(res.status === 200) {
                    that.relateFcOptions = res.data
                    that.relateFcTotal = res.total
                }
                that.relateFcIdsSelectloading = false
            })
        },
        handleCurrentChange(currentpage) {
            this.relateFcPageIndex = currentpage
            this.getFcfOptions($('#unitDefaultFcStructId .el-select__input').val(), true)
        },
        // 获取维保公司下拉框数据
        getMaintainCompanyList() {
            let that = this
            getMaintainOrgList().then(res => {
                res.data.unshift({
                    id: '',
                    name: '无',
                    nodes: []
                })
                that.maintainCompanyOptions = res.data
            })
        },
        // 选择了维保公司
        handleNodeClick(obj, node, item) {
            let that = this
            if(obj.name && obj.id) {
                // 切换为必填字段
                that.unitInfoFormRules.maintainContract[0].required = true
                that.unitInfoFormRules.maintainStartDate[0].required = true
                that.unitInfoFormRules.maintainEndDate[0].required = true
            } else {
                // 切换为非必填
                that.unitInfoFormRules.maintainContract[0].required = false
                that.unitInfoFormRules.maintainStartDate[0].required = false
                that.unitInfoFormRules.maintainEndDate[0].required = false
            }
        },
        // 保存单位信息
        saveUnitInfo() {
            let that = this
            // 校验表单
            that.$refs['unitInfoForm'].validate((valid) => {
                if (valid) {
                    var parames = {
                        id : that.unitInfoForm.id,
                        orgName : that.unitInfoForm.orgName,
                        englishName : that.unitInfoForm.englishName,
                        signingStartTime : that.unitInfoForm.signingStartTime,
                        signingEndTime : that.unitInfoForm.signingEndTime,
                        delayTime : that.unitInfoForm.delayTime,
                        picLimit : that.unitInfoForm.picLimit,
                        jobTaskNum : that.unitInfoForm.jobTaskNum,
                        indoorMapInfoId : that.unitInfoForm.indoorMapInfoId || '',
                        sort : that.unitInfoForm.sort ? that.unitInfoForm.sort : '-1',
                        defaultBuildingId : that.unitInfoForm.defaultBuildingId,
                        defaultFcStructId : that.unitInfoForm.defaultFcStructId,
                        orgId : that.unitInfoForm.orgId || '',
                        isLianyunAccount : that.unitInfoForm.isLianyunAccount,
                        isVideoInternet : that.unitInfoForm.isVideoInternet,
                        upOrgIds : that.unitInfoForm.upOrgIds,
                        maintainCompanyId: that.unitInfoForm.maintainCompanyId || '',
                        maintainContract: that.unitInfoForm.maintainContract,
                        maintainStartDate: that.unitInfoForm.maintainStartDate,
                        maintainEndDate: that.unitInfoForm.maintainEndDate,
                    }
                    this.showdisabled = true
                    // 提交
                    saveOrgInfoExt(parames).then(res => {
                        if(res.status === 200) {
                            that.$message({
                                message: '保存成功！',
                                type: 'success'
                            })
                            that.showdisabled = false
                            that.closeFun(true)
                        } else {
                            that.showdisabled = false
                            that.$message({
                                message: res.info,
                                type: 'warning'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        }
    }
}
</script>
<style lang="scss">
.unit-info-form-wrap {
    .tree-wrap{
        .el-select {
            width: 100%!important;
        }
    }
}
</style>
